<template>
    <div class="lse_guide_mask" v-if="flag">
        <div class="lse_guide_content" :style="style">
          <div>
            <div>
            <b>{{title || '导航' + num}}</b>
            </div>
            <div style="font-size: 12px;">
              {{text || '暂无描述'}}
            </div>
            <div style="margin-top:10px;text-align:right">
               <el-button size="mini" @click="next">下一步</el-button>
               <el-button size="mini" @click="end">结束</el-button>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import $q from 'jquery'
import nodes from './nodes'
export default {
  name: 'guide',
  data () {
    return {
      flag: false,
      num: 0,
      title: undefined,
      text: undefined,
      style: {},
      oldStyle: {}
    }
  },
  methods: {
    end () {
      this.flag = false
      if (this.num !== -1) {
        let oldObj = nodes[this.num]
        $q(oldObj.el).css('border', this.oldStyle)
      }
      this.lseajax.storageJson.set('lseguide', false)
    },
    next () {
      this.num++
      if (this.num >= nodes.length) {
        let oldObj = nodes[this.num - 1]
        $q(oldObj.el).css('border', this.oldStyle)
        this.lseutil.msg({
          msg: '本次引导已结束'
        })
        this.num = -1
        return
      }
      let obj = nodes[this.num]
      let dom = $q(obj.el)[0]
      this.title = obj.title
      this.text = obj.text
      let height = document.body.clientHeight
      let top
      if (dom.offsetTop + dom.offsetHeight > height) {
        top = dom.offsetTop
      } else {
        top = dom.offsetTop + dom.offsetHeight
      }
      let left = dom.offsetLeft > $q('.lse_guide_content').width() ? dom.offsetLeft - $q('.lse_guide_content').width() : dom.offsetLeft
      this.style = {
        marginTop: top + 'px',
        marginLeft: left + 'px'
      }
      if (this.num > 0) {
        let oldObj = nodes[this.num - 1]
        $q(oldObj.el).css('border', this.oldStyle)
      }
      this.oldStyle = $q(obj.el).css('border')
      $q(obj.el).css('border', '2px solid red')
      if (obj.click) {
        $q(obj.el).click()
      }
    }
  },
  created () {
    let obj = nodes[this.num]
    let dom = $q(obj.el)[0]
    this.title = obj.title
    this.text = obj.text
    let height = document.body.clientHeight
    let top
    if (dom.offsetTop + dom.offsetHeight > height) {
      top = dom.offsetTop
    } else {
      top = dom.offsetTop + dom.offsetHeight
    }
    let left = dom.offsetLeft > $q('.lse_guide_content').width() ? dom.offsetLeft - $q('.lse_guide_content').width() : dom.offsetLeft
    this.oldStyle = $q(obj.el).css('border')
    $q(obj.el).css('border', '2px solid red')
    this.style = {
      marginTop: top + 'px',
      marginLeft: left + 'px'
    }
    // if (obj.click) {
    //   $q(obj.el).click()
    // }
  }
}
</script>

<style scoped>

.lse_guide_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.3);
    z-index: 99999;
}
.lse_guide_content {
  background: white;
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  position: relative;
}
</style>
